<template>
    <div class="">
        <!-- 头部 -->
        <div class="head">
            <vHead :isShow="isShow" @editcameraList="editcameraList" @autocruise="autocruise"
                @PanoramicVideo="PanoramicVideo" @closeVideo="closeVideo" @setPlay="setPlay1" @setFlight="setFlight"
                @cesi="cesi" @addMoxing="addMoxing">
            </vHead>
        </div>
        <!-- 相机列表 -->
        <div class="cameraList animate__animated animate__fadeInLeft" v-if="isShow.cameraList" ref="cameraRef">
            <vCamera @editcameraList="editcameraList" @videoView="videoView" @toggle="toggle" @dlogPlay="dlogPlay">
            </vCamera>
        </div>
        <!-- 背景 -->
        <vMap ref="vMapRef" :cruiseData="cruiseData"></vMap>
        <!-- <vMaps></vMaps> -->
        <!-- 视频组件 -->
        <!-- <draggable item-key="id"> -->
        <!-- <VueDragResize v-if="isShow.videoView" :draggable="true" :x="500" :y="200" :init-w="800" :init-h="50">
            <div class="vVideo" @mousedown="mousemove" @mouseup="mousemoveup" ref="videoRefmove">
                <vVideo :isShow="isShow" :textData="textData" @videoView="videoView"></vVideo>
            </div>
        </VueDragResize> -->

        <div v-if="isShow.videoView" :style="{ left: videoleft, top: videotop }" class="vVideo" @mousedown="videomousemove"
            ref="videoRefmove">
            <vVideo ref="videoRef" :isShow="isShow" :textData="textData" @videoView="videoView"></vVideo>
        </div>

        <!-- 巡航组件 -->
        <div class="vCruise" ref="cruiseRefmove" :style="{ left: cruiseleft, top: cruisetop }" @mousedown="cruisemousemove"
            v-if="isShow.vCruise">
            <vCruise :cruiseData="cruiseData" @cruiseView="autocruise" @getView="getView" @startFlight="startFlight"
                @endRoute="endRoute" @suspend="suspend" @save="save" @changeValue="changeValue"></vCruise>
        </div>
        <!-- 历史视频 -->
        <div class="HistoricalVideo" v-if="isShow.vHvideo">
            <vHistoricalvideo :isShow="isShow"></vHistoricalvideo>
        </div>
        <!-- 历史追溯 -->
        <div class="vHistoricaltracing" v-if="isShow.vHistoricaltracing">
            <vHistoricaltracing @retrospection="retrospection"></vHistoricaltracing>
        </div>
        <!-- 报警联动 -->
        <div class="vPolice" v-if="isShow.vPolice">
            <vPolice @setFlight="setFlight"></vPolice>
        </div>
        <!-- 球机协同 -->
        <div class="vPoliceplay" v-if="isShow.vBall">
            <vPoliceplay :isShow="isShow" :textData="textData" @vBall="vBall" ref="policeplayRef"></vPoliceplay>
        </div>
        <!-- 日志查询 -->
        <div class="vLog" v-if="isShow.vLog">
            <vLog></vLog>
        </div>
        <!-- 态势分析 -->
        <div class="vAnalysis" v-if="isShow.vAnalysis">
            <vAnalysis></vAnalysis>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, unref, onMounted, reactive } from "vue"
// import VueDragResize from 'vue3-draggable-resizable'
import store from "../store/index"
import kang from "../common/mitt.js"
import { ElMessage } from 'element-plus'
let policeplayRef = ref()
const videoleft = ref<string>('50%')
const videotop = ref<string>('50%')

const cruiseleft = ref<string>('.625rem')
const cruisetop = ref<string>('2rem')
// 控制中心
let isShow = ref({
    cameraList: false,//相机列表弹窗
    videoView: false,//视频组件
    vCruise: false,//巡航设置
    vHvideo: false,//历史视频窗口
    vHistoricaltracing: false,//历史追溯
    vPolice: false,//报警联动
    vBall: false,//球机协同
    vLog: false,//日志查询
    vAnalysis: false,//事态分析
})
// 数据中心
let textData = ref({
    videoView: '',//视频标题
    vPolicedata: sessionStorage.getItem('camera') ? sessionStorage.getItem('camera') : '0',//报警信息
})
let cameraRef = ref()
let videoRef = ref()
// 显示相机列表
const editcameraList = (e: any) => {
    if (e) {
        isShow.value.cameraList = e
    } else {
        cameraRef.value.className = "cameraList  animate__animated animate__fadeOutLeft"
        setTimeout(() => {
            isShow.value.cameraList = e
        }, 666)
    }
}
//显示视频组件 细节联动
const videoView = (e: any) => {
    if (e.tag) {
        isShow.value.videoView = e.tag
    } else {
        setTimeout(() => {
            isShow.value.videoView = e.tag
        }, 666)
    }
    textData.value.videoView = e.text//控制视频名称
}
//显示巡航设置
const autocruise = (e: any) => {
    // console.log(e);
    if (e) {
        isShow.value.vCruise = e
    } else {
        setTimeout(() => {
            isShow.value.vCruise = e
        }, 555)
    }
}
// 巡航相关
let vMapRef = ref()
let getView = () => {
    let getViewValues = vMapRef.value.getView()
    store.commit("vRouteView/SETVIEWLIST", getViewValues)//更新值
}
let videoRefmove = ref()
//视频选项
const videomousemove = (e: any) => {
    const drag = unref(videoRefmove) as any
    var diffX = e.clientX - drag.getBoundingClientRect().left
    var diffY = e.clientY - drag.getBoundingClientRect().top

    document.onmousemove = function (e: any) {

        var lefts = e.pageX - diffX
        var tops = e.pageY - diffY


        if (lefts < 0) {
            lefts = 0
        } else if (lefts > window.innerWidth - drag.offsetWidth) {
            lefts = window.innerWidth - drag.offsetWidth
        }
        if (tops < 0) {
            tops = 0
        } else if (tops > window.innerHeight - drag.offsetHeight) {
            tops = window.innerHeight - drag.offsetHeight
        }


        videoleft.value = lefts + drag.offsetWidth / 2 + 'px'
        videotop.value = tops + drag.offsetHeight / 2 + 'px'
    }

    document.onmouseup = function () {

        this.onmousedown = null
        this.onmousemove = null
    }
}
// 巡航设置
let cruiseRefmove = ref()
const cruisemousemove = (e: any) => {
    const drag = unref(cruiseRefmove) as any

    var diffX = e.clientX - drag.getBoundingClientRect().left
    var diffY = e.clientY - drag.getBoundingClientRect().top

    document.onmousemove = function (e: any) {

        var lefts = e.pageX - diffX
        var tops = e.pageY - diffY

        if (lefts < 0) {
            lefts = 0
        } else if (lefts > window.innerWidth - drag.offsetWidth) {
            lefts = window.innerWidth - drag.offsetWidth
        }
        if (tops < 0) {
            tops = 0
        } else if (tops > window.innerHeight - drag.offsetHeight) {
            tops = window.innerHeight - drag.offsetHeight
        }

        cruiseleft.value = lefts + 'px'
        cruisetop.value = tops + 'px'
    }

    document.onmouseup = function () {

        this.onmousedown = null
        this.onmousemove = null
    }
}
// 巡航的数据
let cruiseData = <any>reactive([
    {
        id: 0,
        name: '默认路线',
        value: 0,
        children: [
            {
                x: -2180888.4610119504,
                y: 4387328.281215225,
                z: 4070086.2903183666,
                heading: 0.022731006352433525,
                pitch: -0.972841495448542,
                duration: 6
            },
            {
                x: -2180912.9018427837,
                y: 4387301.9796640985,
                z: 4070092.6085081045,
                heading: 6.282996181021591,
                pitch: -1.020300727828678,
                duration: 6
            },
            {
                x: -2181017.5013388293,
                y: 4387269.808242594,
                z: 4070157.793241215,
                heading: 6.273926302098958,
                pitch: -1.334821857295125,
                duration: 10
            },
            {
                x: -2181068.7560794097,
                y: 4387243.435456547,
                z: 4070173.5178403254,
                heading: 0.013044035555349609,
                pitch: -1.4407032209013422,
                duration: 10
            },
            {
                x: -2181032.9893011358,
                y: 4387222.792673762,
                z: 4070081.969190965,
                heading: 1.050034328623445,
                pitch: -0.6345797728893219,
                duration: 10
            },
            {
                x: -2181101.6290741162,
                y: 4387120.8592427205,
                z: 4070085.14958719,
                heading: 1.2248671389165304,
                pitch: -0.43126270189510185,
                duration: 11
            },
            {
                x: -2181182.0949511044,
                y: 4387076.713720111,
                z: 4070089.6122127455,
                heading: 1.2248671384392535,
                pitch: -0.4312627015212609,
                duration: 14
            },
            {
                x: -2181584.3489090004,
                y: 4386999.56026525,
                z: 4070217.5494081196,
                heading: 0.010624721840157392,
                pitch: -1.5654866670357768,
                duration: 8
            },
            {
                x: -2181663.4141617324,
                y: 4386960.260341496,
                z: 4070217.5290977266,
                heading: 0.010624721840157392,
                pitch: -1.5654866670408158,
                duration: 10
            },
            {
                x: -2181784.416927479,
                y: 4386882.962212063,
                z: 4070217.9348923187,
                heading: 0.010624721840175155,
                pitch: -1.5654866667427707,
                duration: 10
            },
            {
                x: -2181834.1470972174,
                y: 4386882.401966701,
                z: 4070217.2929187655,
                heading: 0.005659766124603394,
                pitch: -1.5128517127729357,
                duration: 8
            },
            {
                x: -2181853.80412751,
                y: 4386675.447666,
                z: 4070145.9673791323,
                heading: 2.08359007370124,
                pitch: -0.40255138393064227,
                duration: 8
            },
            {
                x: -2181909.9799466915,
                y: 4386656.579538563,
                z: 4070136.2062756093,
                heading: 1.9158803295164573,
                pitch: -0.40108043538811855,
                duration: 10
            },
            {
                x: -2181729.8843451748,
                y: 4386771.583081157,
                z: 4070224.2370416513,
                heading: 2.0663773109378596,
                pitch: -0.4168819243001569,
                duration: 10
            },
            {
                x: -2182029.007085912,
                y: 4386625.911796723,
                z: 4070220.8874167777,
                heading: 2.066377311260174,
                pitch: -0.4168819239066912,
                duration: 8
            },
            {
                x: -2182133.5762324147,
                y: 4386563.402788625,
                z: 4070165.5728514385,
                heading: 1.9979333397842556,
                pitch: -0.5570781264376654,
                duration: 11
            },
            {
                x: -2182170.6208315506,
                y: 4386531.214649578,
                z: 4070131.6228256933,
                heading: 1.7269154470783068,
                pitch: -0.2518900672015305,
                duration: 8
            },
            //   中最后一个
            {
                x: -2182235.50064298,
                y: 4386505.069374657,
                z: 4070125.069104558,
                heading: 1.6891010835354745,
                pitch: -0.25235012557051606,
                duration: 10
            },

            {
                x: -2182170.6208315506,
                y: 4386531.214649578,
                z: 4070131.6228256933,
                heading: 1.7269154470783068,
                pitch: -0.2518900672015305,
                duration: 8
            },
            {
                x: -2182133.5762324147,
                y: 4386563.402788625,
                z: 4070165.5728514385,
                heading: 1.9979333397842556,
                pitch: -0.5570781264376654,
                duration: 11
            },
            {
                x: -2181961.5836593686,
                y: 4386639.424757708,
                z: 4070126.8421661835,
                heading: 1.8930334215019684,
                pitch: -0.3914671101069125,
                duration: 10
            },
            {
                x: -2181909.9799466915,
                y: 4386656.579538563,
                z: 4070136.2062756093,
                heading: 1.9158803295164573,
                pitch: -0.40108043538811855,
                duration: 10
            },
            {
                x: -2181853.80412751,
                y: 4386675.447666,
                z: 4070145.9673791323,
                heading: 2.08359007370124,
                pitch: -0.40255138393064227,
                duration: 8
            },
            {
                x: -2181994.1118843486,
                y: 4386722.644556644,
                z: 4070185.540180433,
                heading: 3.130232793369061,
                pitch: -1.437422952163875,
                duration: 10
            },
            {
                x: -2181863.368232766,
                y: 4386842.75315717,
                z: 4070217.950507644,
                heading: 0.010624721840189366,
                pitch: -1.5654866664918554,
                duration: 5
            },
            {
                x: -2181784.416927479,
                y: 4386882.962212063,
                z: 4070217.9348923187,
                heading: 0.010624721840175155,
                pitch: -1.5654866667427707,
                duration: 5
            },
            {
                x: -2181752.79316849,
                y: 4386918.179997333,
                z: 4070217.2929187655,
                heading: 0.010624721840157392,
                pitch: -1.5654866670414225,
                duration: 5
            },
            {
                x: -2181663.4141617324,
                y: 4386960.260341496,
                z: 4070217.5290977266,
                heading: 0.010624721840157392,
                pitch: -1.5654866670408158,
                duration: 8
            },
            {
                x: -2181584.3489090004,
                y: 4386999.56026525,
                z: 4070217.5494081196,
                heading: 0.010624721840157392,
                pitch: -1.5654866670357768,
                duration: 8
            },
            {
                x: -2181182.0949511044,
                y: 4387076.713720111,
                z: 4070089.6122127455,
                heading: 1.2248671384392535,
                pitch: -0.4312627015212609,
                duration: 8
            },
            {
                x: -2181101.6290741162,
                y: 4387120.8592427205,
                z: 4070085.14958719,
                heading: 1.2248671389165304,
                pitch: -0.43126270189510185,
                duration: 8
            },
            {
                x: -2181032.9893011358,
                y: 4387222.792673762,
                z: 4070081.969190965,
                heading: 1.050034328623445,
                pitch: -0.6345797728893219,
                duration: 8
            },
            {
                x: -2181068.7560794097,
                y: 4387243.435456547,
                z: 4070173.5178403254,
                heading: 0.013044035555349609,
                pitch: -1.4407032209013422,
                duration: 8
            },
            {
                x: -2181017.5013388293,
                y: 4387269.808242594,
                z: 4070157.793241215,
                heading: 6.273926302098958,
                pitch: -1.334821857295125,
                duration: 8
            },
            {
                x: -2180912.9018427837,
                y: 4387301.9796640985,
                z: 4070092.6085081045,
                heading: 6.282996181021591,
                pitch: -1.020300727828678,
                duration: 8
            }

        ]
    },
    // {
    //     id: 1,
    //     name: '路线1',
    //     value: 1,
    //     children: [1, 2, 3]
    // },
    // {
    //     id: 2,
    //     name: '路线2',
    //     value: 2,
    //     children: [1]
    // }
])
// 自动巡航

const startFlight = () => {
    // 自动巡航和结束巡航的id都为1
    vMapRef.value.flight(1, 'zd')
}
// 结束巡航
const endRoute = () => {
    // 自动巡航和结束巡航的id都为1
    vMapRef.value.flight(1, 'js')
}
// 暂停巡航
const suspend = (e: any) => {
    // console.log(e);
    if (!e) {
        vMapRef.value.flight(1, 'zt')

    } else {
        vMapRef.value.flight(1, 'jx')
    }
}
// 保存路线
const save = (e: any, n: any) => {
    console.log(e, n);
    cruiseData = eval("(" + localStorage.getItem("cruiseData") + ")") ? eval("(" + localStorage.getItem("cruiseData") + ")") : cruiseData
    cruiseData.push({
        id: cruiseData.length,
        name: n,
        value: cruiseData.length,
        children: e
    })
    // 
    localStorage.setItem('cruiseData', JSON.stringify(cruiseData))
}
// 选中的巡航路线
const changeValue = (e: any) => {
    vMapRef.value.changeValue(e)
}
// 全景视频
const PanoramicVideo = () => {
    vMapRef.value.PanoramicVideo()
}
const closeVideo = () => {
    vMapRef.value.closeVideo()
}
// 相机列表细节联动 大标题飞行
const toggle = (e: any) => {
    vMapRef.value.toggleLinkage(e)
}
// 细节联动
const dlogPlay = (e: any, num: any) => {
    setTimeout(() => {
        // console.log(videoRef.value);
        // 延迟加载视频
        // videoRef.value.axiosPlay(e)
        videoRef.value.axiosPlay1(e, num)
    }, 100)

}
// 历史追溯
const retrospection = (e: any) => {
    vMapRef.value.retrospection(e)
}
//球机协同
const vBall = (e: any) => {
    isShow.value.vBall = e.tag
}
const setPlay1 = (e: any) => {

    setTimeout(() => {
        console.log(policeplayRef.value);
        policeplayRef.value.setPlay(e)
    }, 300)

}
const setFlight = (e: any) => {
    // vMapRef.value.toggleLinkage(e)//公用协同追视飞行
    // console.log(e,'123456789');

    vMapRef.value.sbfx(e)

}
// suo
// 测试 飞行到初始页
const cesi = () => {
    vMapRef.value.ceshi1()
}
const addMoxing = (tag: Boolean) => {
    vMapRef.value.addMoxing(tag)
}
onMounted(() => {
    // sessionStorage.clear()
    // cruiseData = eval("(" + sessionStorage.getItem("cruiseData") + ")") ? eval("(" + sessionStorage.getItem("cruiseData") + ")") : cruiseData
    // console.log(eval("(" + localStorage.getItem("cruiseData") + ")"));
    // localStorage.setItem('cruiseData', JSON.stringify(cruiseData))
    kang.on('blockHvideo', (e: any) => {
        isShow.value.vHvideo = e
    })
    kang.on('vHistoricaltracing', (e: any) => {
        isShow.value.vHistoricaltracing = e
    })
    // 报警
    kang.on('vPolice', (e: any) => {
        isShow.value.vPolice = e
    })
    // 球机协同
    kang.on('vBall', (e: any) => {
        // setTimeout(()=>{
        isShow.value.vBall = e

        // },100)
        // policeplayRef.value.setPlay(e)
    })
    // 日志
    kang.on('vLog', (e: any) => {
        isShow.value.vLog = e
    })
    // 态势分析
    kang.on('vAnalysis', (e: any) => {
        isShow.value.vAnalysis = e
    })
})


</script>
<style scoped>
.head {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}

.cameraList {
    position: fixed;
    top: 3.75rem;
    left: 0;
    z-index: 1;
}

/* 视频组件 */
.vVideo {
    position: fixed;
    /* top: 50%; */
    /* left: 50%; */
    z-index: 1;
    width: 10rem;
    height: 6.25rem;
    margin-top: -3.1rem;
    margin-left: -5rem;
    /* background-color: red; */
}

.vCruise {
    position: fixed;
    /* top: 2rem;
    left: .625rem; */
    width: 7rem;
    height: 3.25rem;
    z-index: 1;
    /* background-color: red; */
}

/* 历史视频窗口 */
.HistoricalVideo {
    position: fixed;
    top: 2.4rem;
    left: 6.25rem;
    width: 11.25rem;
    height: 7.5rem;
    z-index: 3;
    /* background-color: red; */

}

.vHistoricaltracing {
    position: fixed;
    top: 2.4rem;
    left: 6.25rem;
    width: 11.25rem;
    height: 1.5rem;
    z-index: 3;
    /* background-color: red; */
}

.vPolice {
    position: fixed;
    top: 2.4rem;
    left: 14.6rem;
    width: 11.25rem;
    height: 1.5rem;
    z-index: 3;
}

.vPoliceplay {
    position: fixed;
    top: 47%;
    left: 40%;
    z-index: 1;
    width: 10rem;
    height: 6.25rem;
    margin-top: -3.1rem;
    margin-left: -5rem;
    /* background-color: red; */
}

.vLog {
    position: fixed;
    top: 2.4rem;
    left: 14.6rem;
    width: 11.25rem;
    height: 1.5rem;
    z-index: 3;
}

.vAnalysis {
    position: fixed;
    top: 2.4rem;
    left: 12.6rem;
    width: 11.25rem;
    height: 4.5rem;
    z-index: 3;
}
</style>